import React, {Component} from 'react';
import './index.less';
import {Button, Col, FormControl, Icon, Row, Table} from 'tinper-bee';
import Tree from 'bee-tree';
import "bee-tree/build/Tree.css";
import {searchWorkTmp, watchQualityTmp} from './showtemplate.config.js';

const TreeNode = Tree.TreeNode;
const columns = [
    {title: "名称", dataIndex: "checkname", key: "checkname", width: 150},
    {title: "检查项数量", dataIndex: "cheackitemtotal", key: "cheackitemtotal", width: 150}
];
export default class ShowTemplate extends Component {
  init = () =>{
	let _me = this;
      let flag = sessionStorage.getItem("industryTypeFlag");
      let title = sessionStorage.getItem('industryTypeName');
	let key = sessionStorage.getItem('industryTypeKey');
      if (flag) {
          watchQualityTmp({'pkType': key}).then((res) => {
              let data = res.data.result;
              let tableData = this.getTableData(data);
              _me.setState({
                  title: title,
                  flag,
                  className: 'treenone',
                  tableClassName: 'treeblock',
                  tableData
              });
          })
      } else {
          searchWorkTmp({'pkType': key}).then((res) => {
              let data = res.data.result;
              _me.loopNextData(data);
              _me.setState({
                  title: title,
                  treeData: data
              });
              this.handlerExpendKey();
          })
      }
  };
    getTableData = (data) => {
        let tableData = [];
        for (let i = 0; i < data.length; i++) {
            let item = data[i];
            let tableItem = {};
            tableItem.checkname = item.checkname;
            if (item.itemtabledata) {
                tableItem.cheackitemtotal = item.itemtabledata.length;
            } else {
                tableItem.cheackitemtotal = 0;
            }
            tableItem.key = item.checkname;
            tableData.push(tableItem)
        }
        return tableData
    };
  loopNextData = (data) => {
		let _me = this;
		data.forEach(function(item, index){
			item['name'] = item.sname;
			item['key'] = item.scode;
			item['id'] = item.pkProcedure;
			item['className'] = false;
			if(item.childProcedure){
				_me.loopNextData(item.childProcedure)
			}
		})
  };

    constructor(props) {
        super(props);
        this.state = {
            treeData: [],
            tableData: [],
            title: '',
            expendKey: [],
            flag: '',
            className: 'treeblock',
            tableClassName: 'tablenone',
        };
    }

    componentDidMount() {
        this.init();
    }
  createName = (item)=>{
  	return (
  			<div>
  				<span> {item.scode} </span>
  				<span> {item.sname} </span>
  			</div>
  		)
  }
  handlerExpendKey = () =>{
  	let newExpendKey = [];
	this.state.treeData.forEach(function(item, index){
		newExpendKey.push(item.key);
		if(item.childProcedure){
			item.childProcedure.forEach(function(item, index){
				newExpendKey.push(item.key);
			})
		}
	})
	this.setState({
		expendKey: newExpendKey
	});
  }
  close =()=>{
  	window.close();
  }

  render() {
  	let _me = this;
    const loop = data => data.map((item) => {
      if (item.childProcedure && item.childProcedure !== null) {
        return <TreeNode title={_me.createName(item)} key={item.key}>{loop(item.childProcedure)}</TreeNode>;
      }
      return <TreeNode title={_me.createName(item)} key={item.key} isLeaf={item.isLeaf} />;
    });
    const treeNodes = loop(this.state.treeData);
      return (
    		<div className="content">
				<div className="header clearfix">
					<h4 className="title">{this.state.title}</h4>
					<div className="header__btn-group">
						<Button colors="primary" className="header__close-btn"
							onClick={this.close}>关闭</Button>
					</div>
				</div>
				<div className="main">
                    <div className={"quality__tmp " + this.state.tableClassName}>
                        <Table
                            bordered={"true"}
                            columns={columns}
                            data={this.state.tableData}
                        />
                    </div>
                    <Tree className={this.state.className} expandedKeys={this.state.expendKey}
                          openIcon={<Icon type="uf-minus"/>} closeIcon={<Icon type="uf-plus"/>}>
			        {treeNodes}
			      </Tree>
				</div>
			</div>
    );
  }
};